import { Spin, Input, Checkbox, Form, Button, Col, Row, message } from 'antd';
import { UserOutlined, LockOutlined, BulbOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { DynamicRoutes } from '@/router/index';
import './index.less';
import { login, validatecode } from '@/services/login';
import { SETSESSIONSTORE, SETCOOKIE } from '@/utils/cookies';
import { useContainer } from 'unstated-next';
import Local from '@/store';

export default function Login(props) {
  console.log(props);
  const [spinning, setspinning] = useState(false);
  const [code, setcode] = useState('');
  const [key, setkey] = useState('');
  const {
    user: { setUserInfo },
    permissonStore: { setPermissionList },
  } = useContainer(Local);

  const timer = setTimeout(() => {
    setspinning(false);
  }, 5000);

  const getimg = () => {
    validatecode({})
      .then((res) => {
        const { code, key } = res.data.data;
        setcode(code);
        setkey(key);
      })
      .catch((err) => {
        console.log('validatecode', err);
      });
  };

  useEffect(() => {
    getimg();
    return () => {
      clearTimeout(timer);
    };
  }, []);

  const onFinish = async (values) => {
    if (timer) {
      clearTimeout(timer);
    }
    setspinning(true);
    const { account, pwd, code } = values;
    login({ account, pwd, key, code })
      .then((res) => {
        console.log('res', res);
        if (res.data.code == 200) {
          SETCOOKIE('token', res.data.data.token);
          SETSESSIONSTORE('useInfo', JSON.stringify(res.data.data));
          setUserInfo(res.data.data);
          setPermissionList(DynamicRoutes);
          props.history.push('/home');
        } else {
          message.error(res.data.message);
        }
        setspinning(false);
      })
      .catch((err) => {
        console.log('err', err);
        timer();
      });
  };

  const changeclick = () => {
    getimg();
  };

  return (
    <div className="Login">
      <div className="login_view">
        <Spin tip="加载中..." size="large" spinning={spinning}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="account"
              rules={[
                {
                  required: true,
                  message: '请输入账号!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
            </Form.Item>
            <Form.Item
              name="pwd"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" />
            </Form.Item>
            <Form.Item name="code" rules={[{ required: true }]}>
              <Row>
                <Col span={8}>
                  <Input placeholder="验证码" prefix={<BulbOutlined />} />
                </Col>
                <Col span={10} offset={2}>
                  <img style={{ width: '90%', height: '40px', marginTop: '-10px' }} src={code} onClick={changeclick}></img>
                </Col>
              </Row>
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <a className="login-form-forgot" href="">
                忘记密码
              </a>
            </Form.Item>

            <Form.Item wrapperCol={{ span: 24 }}>
              <Button type="primary" htmlType="submit" className="site-form-item-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </div>
    </div>
  );
}
